<template>
	<div>
		<span class="handleBtns">
			<el-button plain size="mini" @click="goBackPage">返回上一页</el-button>
			<el-button type="primary" size="mini" @click="postEditor">完成编辑</el-button>
		</span>
		<el-card class="box-card cardEditor" :class="editorBox?'':'editorBox'">
			<el-form :model="editorConfig" class="demo-form-inline" size="mini" style="text-align: left;"
				label-width="90px" label-position="left">
				<el-form-item label="名称">
					<el-input v-model="editorConfig.title" style="width: 120px;"></el-input>
				</el-form-item>
				<el-form-item label="所在图层">
					<el-select v-model="editorConfig.pId" placeholder="请选择" style="width: 120px;">
					    <el-option label="我的图层" value="h1"></el-option>
						<el-option label="基地圈定范围" value="h2"></el-option>
						<el-option label="栽培品种管理" value="h3"></el-option>
					  </el-select>
				</el-form-item>
				<div v-if="editorConfig.pId == 'h3' && editorConfig.type !== 'marker' && editorConfig.type !== 'polyline' ">
					<el-form-item label="品种选择">
						<el-select v-model="editorConfig.variety" placeholder="请选择" style="width: 120px;">
						    <el-option v-for="item in varietyList" :key="item.id" :label="item.varietyName" :value="item.id"></el-option>
						  </el-select>
					</el-form-item>
					<!-- <el-form-item label="自定义品种">
						<el-input v-model="editorConfig.customVariety" placeholder="输入品种名称" style="width: 120px;"></el-input>
					</el-form-item> -->
				</div>
				
				<div v-if="editorConfig.type === 'marker'">
					<el-form-item label="标注图标">
						<img :src="editorConfig.markerIcon" @click="showhideMarkerIcon" class="markerIcons" alt="">
					</el-form-item>
					<el-form-item label="标注内容">
						<el-input v-model="editorConfig.content" style="width: 120px;" type="textarea" resize="none"
							:autosize="{ minRows: 15, maxRows: 15}"></el-input>
					</el-form-item>
				</div>
				<div v-else>
					
					<el-form-item label="线段长度" v-if="editorConfig.type === 'polyline'">
						<el-input v-model="editorConfig.length" disabled style="width: 120px;"></el-input><span class="units"> {{ editorConfig.unit }}</span> 
					</el-form-item>
					
					<el-form-item label="投影面积" v-if="editorConfig.type === 'polygon' || editorConfig.type === 'rectangle' || editorConfig.type === 'circle'">
						<el-input v-model="editorConfig.area" disabled style="width: 120px;"></el-input><span class="units"> {{ editorConfig.unit }}</span> 
					</el-form-item>
					
					
					<el-form-item label="投影半径" v-if="editorConfig.type === 'circle'">
						<el-input v-model="editorConfig.radius" disabled style="width: 120px;"></el-input><span class="units"> {{ editorConfig.radiusUnit }}</span> 
					</el-form-item>
					
					<el-form-item label="投影周长" v-if="editorConfig.type === 'polygon' || editorConfig.type === 'rectangle' || editorConfig.type === 'circle'">
						<el-input v-model="editorConfig.perimeter" disabled style="width: 120px;"></el-input><span class="units"> m</span> 
					</el-form-item>
					
					<el-form-item label="线段宽度">
						<el-input v-model="editorConfig.options.weight" style="width: 120px;">
							<template slot="append">px</template>
						</el-input>
					</el-form-item>
					<el-form-item label="线段类型">
						<el-select v-model="editorConfig.options.dashArray" placeholder="请选择" style="width: 120px;">
						    <el-option label="实线" :value="0"></el-option>
							<el-option label="虚线" :value="10"></el-option>
						  </el-select>
					</el-form-item>
					<el-form-item label="线段颜色">
						<el-color-picker v-model="editorConfig.options.color" :predefine="$globalData.predefineColors">
						</el-color-picker>
					</el-form-item>
					<el-form-item label="线段透明度">
						<el-slider v-model="editorConfig.options.opacity" style="width: 120px;" :min="0" :max="1"
							:step="0.1"></el-slider>
					</el-form-item>
					<el-form-item label="内部填充" v-if="editorConfig.type !== 'polyline' && editorConfig.type !== 'marker'">
						<el-radio-group v-model="editorConfig.options.fill">
							<el-radio :label="true">是</el-radio>
							<el-radio :label="false">否</el-radio>
						</el-radio-group>
					</el-form-item>
					<div v-if="editorConfig.options.fill && editorConfig.type !== 'polyline' && editorConfig.type !== 'marker'">
						<el-form-item label="填充颜色">
							<el-color-picker v-model="editorConfig.options.fillColor" :predefine="$globalData.predefineColors"></el-color-picker>
						</el-form-item>
						<el-form-item label="填充透明度">
							<el-slider v-model="editorConfig.options.fillOpacity" style="width: 120px;" :min="0"
								:max="1" :step="0.1"></el-slider>
						</el-form-item>
					</div>
				</div>
				<el-form-item :label="editorConfig.type !== 'polyline'?'面积显示':'长度显示'" v-if="editorConfig.type !== 'marker'">
					<el-radio-group v-model="editorConfig.isShowArea">
						<el-radio :label="true">是</el-radio>
						<el-radio :label="false">否</el-radio>
					</el-radio-group>
				</el-form-item>
				
				<el-form-item label="自动定位">
					<el-radio-group v-model="editorConfig.isLocation">
						<el-radio :label="true">是</el-radio>
						<el-radio :label="false">否</el-radio>
					</el-radio-group>
				</el-form-item>
				<el-form-item>
					<el-button type="danger" @click="cancelEditor">取消</el-button>
					<el-button type="primary" @click="finishEditor">确定</el-button>
				</el-form-item>
			</el-form>
		</el-card>
		<markerIcon v-if="isShowMarkerIcon" @showhideMarkerIcon="showhideMarkerIcon" :iconUrls="editorConfig.markerIcon" @updateMarkerIcon="updateMarkerIcon"></markerIcon>
	</div>
</template>

<script>
	import { editorMap } from './utils/rightEditorMap.js'
	import markerIcon from './markerIcon.vue'
	export default {
		components:{
			markerIcon
		},
		data(){
			return {
				layerEditor: false,
				
				editorBox: false,
				// editorType: '', // 编辑类型
				isShowMarkerIcon: false, // 是否显示选择图标弹窗
				varietyList: '', // 品种列表
				
				editorConfig: {
					options: {
						clickable: true,
						color: "",
						fill: true,
						fillColor: "",
						fillOpacity: 0.2,
						opacity: 0.5,
						stroke: true,
						weight: 2,
						dashArray: 0 // 如果为线段，设置虚线和实线0---10
					},
					title: '',
					content: '', // 标注内容
					markerIcon: '', // 标注图标
					isLocation: false ,// 是否自动定位
					length: 0,
					area: 0,
					unit: '',
					radius: 0,
					radiusUnit: '',
					pId: '',
					pName: '',
					variety: '' ,// 品种
					customVariety: '',// 自定义品种
					varietyIndex: '',
					perimeter: '',
					isShowArea: true // 是否显示面积
					// centralPoint: '' // 图层中心点
				},
				variety: {
					varietyId: '',
					varietyIndex: '',
				}
			}
		},
		watch:{
			'editorConfig.pId'(newData){
				if(newData == 'h1'){
					this.editorConfig.pName = '我的图层'
				} else if(newData == 'h2'){
					this.editorConfig.pName = '基地圈定范围'
				} else if(newData == 'h3'){
					this.editorConfig.pName = '栽培品种管理'
				}
				
			}
		},
		mounted() {
				// 地图图层编辑功能初始化成功
			editorMap.init(this).then(res=>{
				// if(this.variety && this.variety.varietyId !== '' && this.variety.varietyIndex !== ''){
				// 	this.editorConfig.variety = this.variety.varietyId
				// 	this.editorConfig.varietyIndex = this.variety.varietyIndex
				// 	this.editorConfig.pId = 'h3'
				// }
				// 获取品种
				this.getVarietyList()
				// console.log(this.$route.query)
				if(this.$route.query.varietyId!=='' && this.$route.query.varietyIndex!==''){
					this.variety.varietyId = this.$route.query.varietyId
					this.variety.varietyIndex = this.$route.query.varietyIndex
					this.editorConfig.pId = 'h3'
					this.editorConfig.variety = this.$route.query.varietyId
					this.editorConfig.varietyIndex = this.$route.query.varietyIndex
				}
				// console.log(this.editorConfig)
			})
			
			
		},
		methods:{
			showhideMarkerIcon(){
				// 关闭选择标注图标的弹窗
				this.isShowMarkerIcon = !this.isShowMarkerIcon
			},
			updateMarkerIcon(url){
				// 确认选择标注图标
				this.editorConfig.markerIcon = url
			},
			getEditorData(data){
				// 打开属性编辑区域
				this.editorBox = true
				// 获取到对象的编辑数据
				// this.editorType = data.type // 编辑对象的类型
				// 对象属性赋值
				this.editorConfig = data
				if(data.type == 'marker'){
					// 标注
					this.editorConfig.length = 0
					this.editorConfig.area = 0
					this.editorConfig.unit = ''
					this.editorConfig.radius = 0
					this.editorConfig.radiusUnit = ''
					this.editorConfig.variety = ''
					this.editorConfig.customVariety = ''// 自定义品种
					this.editorConfig.perimeter = ''
				} else {
					this.editorConfig.content = ''
					this.editorConfig.markerIcon = ''
					if(data.type == 'polyline'){
						// 线段
						this.editorConfig.area = 0
						this.editorConfig.radius = 0
						this.editorConfig.radiusUnit = ''
						// this.editorConfig.unit = ''
						this.editorConfig.variety = ''
						this.editorConfig.customVariety = ''// 自定义品种
					} else if(data.type == 'polygon' || data.type == 'rectangle'){
						// 多边形
						this.editorConfig.length = 0
						this.editorConfig.radius = 0
						this.editorConfig.radiusUnit = ''
					} else if(data.type == 'circle'){
						// 圆
						this.editorConfig.length = 0
					}
					//  else if(data.type == 'rectangle'){
					// 	// 矩形
						
					// }
				}
			},
			cancelEditor() {
				// 取消编辑
				this.editorBox = false
				// 清楚地图当前编辑的对象
				editorMap.detectionClick()
				// this.$newBigeMap.cancelEditor()
			},
			finishEditor(){
				// 完成编辑,向地图传递数据
				// console.log(this.editorConfig)
				if(this.editorConfig.pId!='h3'){
					this.editorConfig.variety = ''
					this.editorConfig.customVariety = ''// 自定义品种
				}
				
				editorMap.finishEditor(this.editorConfig)
				this.editorBox = false
			},
			goBackPage() {
				// 返回上一页
				editorMap.goBackPage().then(res=>{
					this.$router.back()
				}).catch(e=>{
					this.$confirm(e, '提示', {
						confirmButtonText: '确定',
						cancelButtonText: '取消',
						type: 'warning'
					}).then(() => {
						this.$router.back()
					})
				})
			},
			postEditor() {
				// 提交数据
				let pdata = this.$parent
				if (this.$route.query.baseType == 'noBaseId') {
					// 得到地图数据的mapDataId和posturl和baseid
					this.saveMapDataToStoerg()
				} else if (!pdata.baseId) {
					this.$message.error('没有选择基地')
				} else {
					this.saveMapDataToSql(pdata)
				}
				
			},
			// 保存数据到本地缓存
			saveMapDataToStoerg(){
				editorMap.getMapCoverageData().then(res=>{
					// console.log(res)
					try {
						sessionStorage.setItem('mapEphemeralData', JSON.stringify(res))
						this.$message.success('保存成功，即将返回上一页')
						setTimeout(()=>{
							this.$router.back()
						},600)
					} catch (error) {
						this.$message.error('数据保存失败')
						
					}
				}).catch(e=>{
					this.$confirm(e, '提示', {
						confirmButtonText: '确定',
						cancelButtonText: '取消',
						type: 'warning'
					}).then(() => {
						this.$router.back()
					})
				})
			},
			// 保存数据到数据库
			saveMapDataToSql(pdata){
				// 得到地图数据的mapDataId和posturl和baseid
				editorMap.getMapCoverageData().then(res=>{
					// console.log(res)
					// return
					this.$request.postJson(pdata.postUrls, {
						baseId: pdata.baseId,
						json: res,
						id: pdata.mapDataId,
						type: '1'
					}).then(res => {
						// console.log(res)
						if (res.code == 200) {
							this.$message.success('保存成功')
							setTimeout(() => {
								this.$router.back()
							}, 1000)
						} else {
							this.$message.error('保存失败')
						}
					}).catch(() => {
						this.$message.error('保存失败')
					})
				}).catch(e=>{
					this.$confirm(e, '提示', {
						confirmButtonText: '确定',
						cancelButtonText: '取消',
						type: 'warning'
					}).then(() => {
						this.$router.back()
					})
				})
			},
			// 获取品种列表
			getVarietyList(){
				this.$request.get(this.$api.queryVarieties).then(res=>{
					if(res.code == 200){
						this.varietyList = res.data
						// console.log(res.data)
					}
				})
			}
		}
	}
</script>

<style scoped="scoped">
	.cardEditor {
		position: absolute;
		top: 52px;
		right: 11px;
	}
	
	.handleBtns {
		position: absolute;
		top: 12px;
		right: 10px;
	}
	
	.editorBox {
		right: -300px;
	}
	.units{
		color: #C0C4CC;
		font-size: 12px;
	}
	.markerIcons{
		cursor: pointer;
		height: 28px;
	}
	.demo-form-inline>>>.el-form-item--mini.el-form-item{
		margin-bottom: 10px !important;
	}
</style>
